<template>
  <div class="smsContainer">
    <el-form-item label="手机号">
      <el-input
        maxlengtn="11"
        type="text"
        class="captcha phone"
        v-model="phoneNumber"
      ></el-input>
      <span @click="sendSms" class="captcha-svg" v-text="msg"></span>
    </el-form-item>
    <el-form-item label="验证码">
      <el-input maxlengtn="5" v-model="code"></el-input>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="submit">提交</el-button>
    </el-form-item>
  </div>
</template>
<script>
import * as api from "@/api/users";
export default {
  props: {
    storageUserInfo: {
      required: true,
    },
  },
  data() {
    return {
      msg: "点击发送验证码",
      flag: true,
      phoneNumber: "",
      code: "",
    };
  },
  methods: {
    async sendSms() {
      if (this.flag) {
        //调用接口，获取手机验证码
        let res = await api.getSmsCode(this.phoneNumber);
        // console.log(res);
        if (res.data.state) {
          //短信发送成功
          this.$message({
            type: "success",
            message: "短信发送成功",
          });
          this.flag = false;
          let delay = 5;
          this.msg = `${delay}s后重新发送`;
          this.interval = setInterval(() => {
            delay--;
            if (delay < 1) {
              this.msg = "点击发送验证码";
              this.flag = true;
              clearInterval(this.interval);
            } else {
              this.msg = `${delay}s后重新发送`;
            }
          }, 1000);
        } else {
          this.$message.error(res.data.msg);
        }
      }
    },
    async submit() {
      let res = await api.smsLogin(this.code);
      // console.log(res);
      if (res.data.state) {
        //将内容存到本地
        this.storageUserInfo(res.data);
        //跳转页面
        this.$router.push("/");
      }
    },
  },
};
</script>
<style lang="less" scoped>
.smsContainer {
  padding-right: 20px !important;
  width: 89%;
  .el-form-item {
    margin-bottom: 22px;
    /deep/.el-form-item__label {
      color: #fff;
    }
    .phone {
      width: 140px !important;
      vertical-align: top;
      height: 45px;
      /deep/.el-input__inner {
        width: 100%;
        height: 45px;
        border-radius: 5px 0 0 5px;
        border: 0;
        font-size: 18px;
      }
    }
    .captcha-svg {
      background: #fff;
      display: inline-block;
      height: 45px;
      width: 115px;
      text-align: center;
      cursor: pointer;
      border: 0;
      border-radius: 0 5px 5px 0;
      color: #888;
      line-height: 45px;
      text-decoration: underline;
      user-select: none;
    }
    .captcha .el-input__inner {
      width: 100%;
      height: 45px;
      border-radius: 5px 0 0 5px;
      border: 0;
      font-size: 18px;
    }
    .el-button--primary {
      background: linear-gradient(90deg, #1596fb, #002dff);
      width: 250px;
    }
  }
}
</style>
